<template>
    <el-dialog
        v-bind="attrs"
        :model-value="props.modelValue"
        :show-close="false"
        :fullscreen="attrs?.fullscreen ?? isFullscreen"
        :before-close="handleClose"
    >
        <template #header>
            <div class="relative h-54px flex items-center justify-between pl-15px pr-15px">
                <slot name="title">
                    {{ title }}
                </slot>
                <div class="absolute right-15px top-[50%] h-54px flex translate-y-[-50%] items-center justify-between">
                    <el-icon v-if="isFullScreenBtn" class="is-hover mr-5px cursor-pointer w-5 h-5" @click="handleFullscreen">
                        <FullScreen />
                    </el-icon>
                    <el-icon class="is-hover cursor-pointer w-5 h-5" @click="handleClose">
                        <Close />
                    </el-icon>
                </div>
            </div>
        </template>
        <div v-loading="props.loading" class="dialogBody">
            <slot />
        </div>
        <template #footer>
            <span v-if="!slots.footer" class="dialog-footer">
                <el-button type="primary" @click="handleConfirm">
                    {{ props.confirmText }}
                </el-button>
                <el-button @click="handleClose">
                    {{ props.cancelText }}
                </el-button>
            </span>
            <slot v-else name="footer" />
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { computed, ref, useAttrs, useSlots } from 'vue'
import { FullScreen, Close } from '@element-plus/icons-vue'
const attrs = useAttrs()
const slots = useSlots()
const isFullscreen = ref(false)
const isFullScreenBtn = computed(() => {
    if (props.hiddenFullBtn) return false
    if (attrs?.fullscreen) return false
    return true
})

interface PropsType {
    title?: string
    isDraggable?: boolean
    modelValue?: boolean
    hiddenFullBtn?: boolean
    loading?: boolean
    confirmText?: string
    cancelText?: string
}

const props = withDefaults(defineProps<PropsType>(), {
    title: '',
    isDraggable: false,
    modelValue: false,
    hiddenFullBtn: false,
    loading: false,
    confirmText: '确认',
    cancelText: '关闭',
})

const emits = defineEmits<{
    (e: 'update:modelValue'): void
    (e: 'confirm'): void
    (e: 'close'): void
}>()

const handleFullscreen = () => {
    if (attrs?.fullscreen) return
    isFullscreen.value = !isFullscreen.value
}
const handleClose = () => {
    if (Reflect.has(attrs, 'before-close') && typeof attrs['before-close'] === 'function') {
        attrs['before-close']()
    }
    emits('close')
}
const handleConfirm = () => {
    emits('confirm')
}
defineExpose({
    isVisible: props.modelValue,
})
</script>
